<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="data/pie-texture.js"></script>
    <script src="lib/dat.gui.min.js"></script>
    <link rel="stylesheet" href="lib/reset.css"/>
    <script src="lib/testHelper.js"></script>
</head>
<body>
<style>
</style>

<div id="main"></div>
<div id="main2"></div>


<script>
    var chart;
    require([
        'echarts'
        // 'echarts/chart/pie',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/toolbox'
    ], function (echarts) {

        chart = echarts.init(document.getElementById('main'));

        // Pencil sketch texture
        var patternSrc = window.pieTexture;
        var img = new Image();
        img.src = patternSrc;

        var itemStyle = {
            normal: {
                opacity: 0.7,
                color: {
                    image: img,
                    repeat: 'repeat'
                },
                borderWidth: 3,
                borderColor: '#235894'
                // shadowBlur: 10,
                // shadowOffsetX: 0,
                // shadowOffsetY: 5,
                // shadowColor: 'rgba(0, 0, 0, 0.4)'
            }
        };
        chart.setOption({
            legend: {
                data: ['直接访问（初始就被选中）', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                // data: []
            },
            toolbox: {
                left: 'left',
                feature: {
                    dataView: {},
                    saveAsImage: {}
                }
            },
            tooltip: {},
            series: [{
                name: 'pie',
                type: 'pie',
                selectedMode: 'single',
                selectedOffset: 30,
                clockwise: true,
                label: {
                    textStyle: {
                        fontSize: 18,
                        // color: '#333'
                    }
                },
                labelLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                // emphasis: {
                //     labelLine: {
                //         lineStyle: {
                //             color: 'red'
                //         }
                //     },
                //     itemStyle: {
                //     }
                // },
                data: [
                    {
                        value: 235,
                        name: '直接访问（初始就被选中）',
                        cursor: 'move',
                        selected: true
                    },
                    {
                        value: 163, name: '标签在内部',
                        label: {
                            normal: {
                                position: 'inside'
                            }
                        }
                    },
                    {
                        value: 310, name: '邮件营销', label: {
                            normal: {
                                textStyle: { // compat
                                    color: 'red'
                                },
                                formatter: '{abg|（居右）背景文字 }\n  {b|{b}}{c|}  ',
                                backgroundColor: 'rgba(0,0,0,0.1)',
                                borderColor: '#777',
                                borderWidth: 2,
                                borderRadius: 3,
                                rich: {
                                    abg: {
                                        color: '#eee',
                                        fontSize: 14,
                                        backgroundColor: '#333',
                                        width: '100%',
                                        align: 'right',
                                        height: 22,
                                        borderRadius: [4, 4, 0, 0] // 四角的 borderRadius
                                    },
                                    b: {
                                        fontSize: 20,
                                        lineHeight: 46
                                    },
                                    c: {
                                        backgroundColor: {
                                            image: './data/hill-Kilimanjaro.png',
                                        },
                                        height: 30
                                    }
                                }
                            },
                            emphasis: {}
                        }
                    },
                    {
                        value: 234, name: '联盟广告', label: {
                            normal: {
                                textStyle: { // compat
                                    color: 'red'
                                },
                                formatter: '{a|（居中）背景文字顺序上有些 triky}{abg|}\n  {b|{b}}{c|}  ',
                                backgroundColor: 'rgba(0,0,0,0.1)',
                                borderColor: '#777',
                                borderWidth: 2,
                                borderRadius: 3,
                                rich: {
                                    a: {
                                        color: '#eee',
                                        fontSize: 14,
                                        align: 'center'
                                    },
                                    abg: {
                                        backgroundColor: '#333',
                                        width: '100%',
                                        align: 'right',
                                        height: 22,
                                        borderRadius: [4, 4, 0, 0] // 四角的 borderRadius
                                    },
                                    b: {
                                        fontSize: 20,
                                        lineHeight: 46
                                    },
                                    c: {
                                        backgroundColor: {
                                            image: './data/hill-Kilimanjaro.png',
                                        },
                                        height: 30
                                    }
                                }
                            },
                            emphasis: {}
                        }
                    },
                    {
                        value: 135, name: '视频广告', label: {
                            normal: {
                                textStyle: { // compat
                                    color: 'red'
                                },
                                formatter: '{abg|（居左）背景文字}\n  {b|{b}}{c|}  ',
                                backgroundColor: 'rgba(0,0,0,0.1)',
                                borderColor: '#777',
                                borderWidth: 2,
                                borderRadius: 3,
                                rich: {
                                    abg: {
                                        color: '#eee',
                                        fontSize: 14,
                                        backgroundColor: '#333',
                                        width: '100%',
                                        align: 'left',
                                        height: 22,
                                        borderRadius: [4, 4, 0, 0] // 四角的 borderRadius
                                    },
                                    b: {
                                        fontSize: 20,
                                        lineHeight: 46
                                    },
                                    c: {
                                        backgroundColor: {
                                            image: './data/hill-Kilimanjaro.png',
                                        },
                                        height: 30
                                    }
                                }
                            },
                            emphasis: {}
                        }
                    },
                    {
                        value: 148, name: '搜索引擎', label: {
                            normal: {
                                textStyle: { // compat
                                    color: 'red'
                                },
                                formatter: '{a|富文本：(emphasis 背景改变）}\n{hr|}\n{b|{b}}{c|}',
                                backgroundColor: 'rgba(0,0,0,0.1)',
                                borderColor: '#777',
                                borderWidth: 2,
                                padding: 5,
                                borderRadius: 3,
                                rich: {
                                    a: {
                                        color: '#334499',
                                        align: 'left'
                                    },
                                    b: {
                                        fontSize: 20
                                    },
                                    hr: {
                                        width: '100%',
                                        borderColor: '#999',
                                        borderWidth: 0.5,
                                        height: 0,
                                        lineHeight: 15
                                    },
                                    c: {
                                        backgroundColor: {
                                            image: './data/hill-Kilimanjaro.png',
                                        },
                                        height: 30
                                    }
                                }
                            },
                            emphasis: {
                                backgroundColor: 'rgba(0,0,0,0.5)',
                                shadowOffsetX: 5,
                                shadowOffsetY: 5,
                                shadowBlur: 5,
                                shadowColor: '#333'
                            }
                        }
                    }
                ],
                itemStyle: itemStyle
            }]
        });

        var config = {
            labelPosition: 'outside',
            clockwise: true,
            labelLineLen: 20,
            labelLineLen2: 5
        };

        function update() {
            chart.setOption({
                series: [{
                    name: 'pie',
                    clockwise: config.clockwise,
                    label: {
                        normal: {
                            position: config.labelPosition
                        }
                    },
                    labelLine: {
                        normal: {
                            length: config.labelLineLen,
                            length2: config.labelLineLen2
                        }
                    }
                }]
            });
        }

        var gui = new dat.GUI();
        gui.add(config, 'clockwise')
            .onChange(update);
        gui.add(config, 'labelPosition', ['inside', 'outside'])
            .onChange(update);
        gui.add(config, 'labelLineLen', 0, 100)
            .onChange(update);
        gui.add(config, 'labelLineLen2', 0, 100)
            .onChange(update);
    })

</script>


<script>
    require([
        'echarts'
    ], function (echarts) {

        var option = {
            legend: {},
            dataset: {
                source: [
                    {name: 'a', value: 123},
                    {name: 'b', value: 456},
                    {name: 'should be selected', value: 789, selected: true}
                ]
            },
            series: {
                type: 'pie',
                selectedMode: 'multiply'
            }
        };

        testHelper.create(echarts, 'main2', {
            option: option,
            info: option
        })

    });
</script>


</body>
</html>
